<html>
    <head></head>
    <body>
        <!-- 在页面添加三个按钮 -->
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
    
        <script>
            // 获取页面所有的input
            var aBtn = document.getElementsByTagName("input");
    
            // 循环绑定点击事件,当然毫无疑问这里点击之后会弹出3，
            //因为我们知道js是单线程的，当基本逻辑语句执行完之后，才会执行点击事件
            //而当你触发点击事件的时候，for循环都已经跑完了，所以i已经变成了3；
            // for(var i = 0; i < aBtn.length; i++){
            //     aBtn[i].onclick = function(){ 
            //         console.log(i);
            //     }
            // }
            // console.log(i)
    
            // 解决方法1:也是最简单的方法，就是将for循环的var变成let
            //这样当点击每个按钮的时候，就会依次弹出0,1,2；
            //let是ES6新增的一个变量声明方式，拥有块级作用域；
            for(let i = 0; i < aBtn.length; i++){
                aBtn[i].onclick = function(){
                    console.log(i);
                }
            }
            console.log(i)
    
            //解决方法2：利用闭包(说是闭包，貌似也不完全是)，也就是函数作用域访问原则的特性
            //函数内部可以访问外部的变量，外部却访问不了里边的；
            //个人感觉主要是在匿名函数里面的i变量没有被销毁内存
            // for(var i = 0; i < aBtn.length; i++){
            //     (function(i){
            //         aBtn[i].onclick = function(){
            //             console.log(i);
            //         }
            //     })(i);
            // }
        </script>
    </body>
</html>